<!-- toaster directive -->
<toaster-container toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"></toaster-container>
<!-- / toaster directive -->

<!-- 导航条 -->
<div class="bg-white bread-crumb">
    <ul class="breadcrumb b-a m-b-n-xs lter b-b wrapper-md">
        <li><a ui-sref="main.tpl.homePage"><i class="fa fa-home"></i> 首页</a></li>
        <li><a ui-sref="main.toolChest.loadPage.list">H5落地页</a></li>
        <li class="active" ng-bind="title"></li>
    </ul>
</div>

<!-- 加载提醒 -->
<div ng-show="loading" class="text-center m-t-md text-lg"><i class="fa fa-spin fa-spinner"></i> 数据加载中...</div>

<!-- 内容区域 -->
<div ng-hide="loading" class="wrapper-md content">
    <!-- 数据显示 -->
    <div class="wrapper-data" style="width:1200px;">
        <div class="panel panel-default">

            <div class="panel-body">
                <!--<div class="w-lg">-->
                <form ng-submit="searchRe()" class="form-horizontal">
                    <div class="form-group clear">
                        <div class="moduleTitle">
                            <ul class="fl">
                                <li class="cursor" ng-class="{tabModule:tabIndex==undefined}" ng-click="swtchTab()">全部</li>
                                <li class="cursor" ng-class="{tabModule:tabIndex==$index}"  ng-repeat="item in tabNum track by $index" ng-click="swtchTab($index,item)">{{item.lbbqName}}</li>
                            </ul>
                            <div class="fr">
                                <label class="col-sm-1 control-label MR90"><button class="ifc-btn btn-info"  ui-sref="main.toolChest.loadPage.save">新增模板</button></label>
                                <label class="col-sm-1 control-label"><button class="ifc-btn btn-info"  ng-click="manageTag()">管理标签</button></label>
                            </div>
                        </div>

                        <div class="moduleContent MT30 clear">
                            <div class="outHide" id='cutter'>
                                <span href="" class="leftBtn cursor" ng-click='toLeft()'><img src="./res/img/leftPage.png" alt=""></span>
                                <div class="slideModule">
                                    <ul class="MT30" ng-style="leftNum" id="swiperUl">
                                        <li ng-repeat="item in picModules track by $index" class="cursor">
                                            <p class="MT23_ text-ellipse" style="text-align: center;width:120px" title="{{item.loadPageName}}">{{item.loadPageName}}</p>
                                            <img ng-src="{{item.moduleImg}}" alt="" ng-click="chooseModules(item.pageLoadId)">
                                            <p class="MT10 PLR5">
                                                <span class="fl" ui-sref="main.toolChest.loadPage.update({pageLoadId:item.pageLoadId})">编辑</span>
                                                <span class="fr" ng-click="delLoadPage(item.pageLoadId)">删除</span>
                                            </p>
                                        </li>
                                    </ul>
                                </div>
                                <span class="rightBtn cursor" ng-click="toRight()"><img src="./res/img/rightPage.png" alt=""></span>
                            </div>
                        </div>
                    </div>

                </form>
                <!--</div>-->
            </div>
        </div><!-- /.panel -->
    </div><!-- /.wrapper-data -->
</div><!-- /.wrapper-md -->

<div class="cover" ng-show="isShow">
    <div class="infor" ng-class="{moduleBox:isShow}">
        <div class="content-title clear">
            <h2 class="text-title">标签管理</h2>
            <span class="icon-close1 heigh50 MT30 deleteBtn cursor fr"  ng-click="closeShow()"><i class="iconfont bigSize">&#xe608;</i></span>
        </div>
        <div class="MT20">
            <table class="inforTable">
                <thead>
                <tr>
                    <th>标签名称</th>
                    <th>序号</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="item in tagNum track by $index">
                    <td>
                        <span ng-show="!item.isEdit">{{item.lbbqName}}</span>
                        <div  ng-show="item.isEdit">
                            <input type="text" id="loadPageType{{item.lbbqName}}" style="width: 100%" ng-model="item.lbbqName">
                        </div>
                    </td>
                    <td>
                        <span ng-show="!item.isEdit">{{item.sort}}</span>
                        <div ng-show="item.isEdit">
                            <input  type="text" id="loadPageType{{item.sort}}" style="width: 100%"  ng-model="item.sort" ng-keyup="clearNoNum(item,'sort')">
                        </div>
                    </td>
                    <td>
                        <span ng-show="!item.isEdit" ng-click="edit(item)">编辑</span>
                        <span ng-show="item.isEdit" ng-click="saveTag(item.loadPageType,item.lbbqName,item.sort)" >保存</span>
                        <span ng-show="!item.isEdit" ng-click="deleteTag(item.loadPageType)" id="clickTagDelete{{item.lbbqName}}">删除</span>
                        <span ng-show="item.isEdit" ng-click="cancel(item,$index)" >取消</span>
                    </td>
                </tr>
                </tbody>
                <tr ng-if="!tagNum||tagNum==''">
                    <td colspan="10">暂无数据</td>
                </tr>

            </table>
            <div class="textC MT50">
                <label class="textC"><button class="ifc-btn btn-dark" ng-click="closeShow()">取消</button></label>
                <label class="textC"><button class="ifc-btn btn-primary" ng-click='addTag()'>新增</button></label>
            </div>
        </div>
    </div>
</div>

<style>
    .content-title{
        width: 100%;
    }

    html,body{
        min-width: 800px;
    }


    .moduleTitle{
        font-size: 16px;
        height: 30px;
    }
    .moduleTitle li{
        float: left;
        position: relative;
        margin-left: 10px;
        padding-bottom: 5px;
    }

    .moduleContent{
        height: 280px;
        width: 100%;
        /*border: 1px solid #d8d8d8;*/
        position: relative;
        overflow: hidden;
        padding: 0 49px;
        border-top: 1px solid #d8d8d8;
        border-bottom: 1px solid #d8d8d8;
    }
    .slideModule{
        /* width: 1110px; */
        height: 250px;
        overflow: hidden;
        /* margin: 0 50px; */
    }
    .slideModule ul{
        /* width: 14000px; */
        height: 180px;
        position: relative;
        white-space: nowrap;
        padding: 0;
    }
    .slideModule li{
        width: 120px;
        height: 180px;
        margin-right: 20px;
        display: inline-block
    }
    .slideModule li img{
        width: 120px;
        height: 150px;
        border: 1px solid #d8d8d8;
        display: inline-block;
    }
    .leftBtn{
        position: absolute;
        left: 20px;
        top: 100px;
    }
    .rightBtn{
        position: absolute;
        right: 20px;
        top: 100px;
    }

    .warp input{
        width: 100%;
        height: 42px;
    }
    .warp textarea{
        width: 100%;
        height: 150px;
    }
    .ladingBtn button{
        width: 100px;
        height: 42px;
        border-radius: 4px;
        border: 1px solid #ffb135;
        background: #ffb135;
        color: #fff;
        font-size: 16px;
    }

    .pagePic img{
        width: 100%;
        height: 100%;
        display: inline-block;
    }
    .pageInput input,.pageSelect input{
        width: 330px;
        height: 34px;
    }
    .pageInput label,.pageCheckBox label,.pageSelect label{
        width: 100px;
    }
    .showBtn button{
        width: 100%;
        height: 34px;
        background: #ffb135;
        color: #fff;
        border: 1px solid #ffb135;
        border-radius: 4px;
    }

    .tabModule::after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        border: 1px solid red;
        width: 100%;
    }

    .dots span{
        width: 15px;
        height: 15px;
        border: 1px solid #d8d8d8;
        border-radius: 50%;
        background: #fff;
        margin-right: 10px
    }

    .mediaTitle a{
        color: #ffb135;
    }

    @media ( min-width: 992px) {
        .col-md-99{
            float: right;
        }
    }

    /* 弹窗 */
    .infor{
        width: 1100px;
        height: 600px;
        background: #fff;
        position: relative;
    }
    .content-title{
        width: 100%;
    }
    .inforTable tr,.inforTable th,.inforTable td{
        height: 58px;
        width: 500px;
        text-align: center;
        border: 1px solid #d8d8d8;
    }
</style>
